<h1 id="top" class="color-orange">Getting Started</h1>
<div id="contentHolder">
  <p>
    Welcome to TEAMMATES!
  </p>
  <p>
    To get started using TEAMMATES, follow the following steps.<br>
    For more help, browse the answers to some <a [tmRouterLink]="instructorHelpPath">frequently asked questions</a>.
  </p>
  <ol>
    <li><a (click)="jumpTo('course-setup')" [tmRouterLink]="">Set up a course</a></li>
    <li><a (click)="jumpTo('session-setup')" [tmRouterLink]="">Create a session</a></li>
    <li><a (click)="jumpTo('session-invites')" [tmRouterLink]="">Wait for your session to open</a></li>
    <li><a (click)="jumpTo('session-results')" [tmRouterLink]="">View and publish session results</a></li>
    <li><a (click)="jumpTo('other-actions')" [tmRouterLink]="">Learn about other actions you can perform</a></li>
    <li><a (click)="jumpTo('contact-us')" [tmRouterLink]="">Contact us</a></li>
  </ol>
  <div class="separate-content-holder">
    <hr>
  </div>
  <h2 id="course-setup">1. Set up a course</h2>
  <div>
    <p>
      A course is how TEAMMATES organises feedback sessions. Each course contains instructors, students and sessions specific to the course.
    </p>
    <ol>
      <li>
        <b>Create a course</b><br>
        From the <span class="ui-text">Home</span> page, click <button class="btn btn-success btn-sm"><i class="fas fa-plus"></i> Add New Course</button>.<br>
        Fill out the following form. Hover your mouse over text to reveal tooltips which tell you what the element does.
        <tm-example-box>
          <tm-course-edit-form [formMode]="CourseEditFormMode.ADD" [isDisplayOnly]="true"></tm-course-edit-form>
        </tm-example-box>
      </li>
      <li>
        <b><a [tmRouterLink]="instructorHelpPath" [queryParams]="{questionId: CoursesSectionQuestions.COURSE_ADD_STUDENTS, section: Sections.courses}">Enroll students in the course</a></b><br>
        Go to the <span class="ui-text">Courses</span> page and click the <button class="btn btn-light btn-sm">Enroll</button> button of the corresponding course.<br>
        Students can be enrolled into teams (e.g., project groups) and sections (e.g., tutorial classes, lecture groups) to facilitate giving feedback in and among these smaller groups.<br>
        TEAMMATES will <b>not</b> automatically notify students that they have been enrolled, as there is nothing for students to do in TEAMMATES until a session opens for submissions.<br>
        TEAMMATES will send an email with access instructions to students only when there is an action for them to perform e.g., when a session opens for submissions.
      </li>
      <li>
        <b><a [tmRouterLink]="instructorHelpPath" [queryParams]="{questionId: CoursesSectionQuestions.COURSE_ADD_INSTRUCTOR, section: Sections.courses}">Add instructors to the course</a></b><br>
        From the <span class="ui-text">Courses</span> page, click the <button class="btn btn-light btn-sm dropdown-toggle">Other Actions</button> button of the course you would like to add instructors to, and select <span class="ui-text">Edit</span> in the drop-down menu. You will be directed to the <span class="ui-text">Edit Course</span> page where you can add a new instructor to your course.
        You can specify the <a [tmRouterLink]="instructorHelpPath" [queryParams]="{questionId: CoursesSectionQuestions.COURSE_INSTRUCTOR_ACCESS, section: Sections.courses}">access level</a> of any instructor you add to a course. For more information about how to add an instructor to your course, click <a [tmRouterLink]="instructorHelpPath" [queryParams]="{questionId: CoursesSectionQuestions.COURSE_ADD_INSTRUCTOR, section: Sections.courses}">here</a>.
      </li>
    </ol>
  </div>
  <p align="right">
    <button type="button" class="btn btn-info" (click)="jumpTo('top')">Back to Top <i class="fas fa-chevron-up"></i></button>
  </p>
  <div class="separate-content-holder">
    <hr>
  </div>
  <h2 id="session-setup">2. Create a session</h2>
  <div>
    <p>
      A feedback session is a course-specific feedback questionnaire. Design the questions you want answered in your feedback session, then wait for the session to open! Each feedback session will be open to responses between the opening and closing times you specify.
    </p>
    <ol>
      <li>
        <b>Create a session</b><br>
        Go to the <span class="ui-text">Sessions</span> page and create a session. Choose among:
      </li>
      <ul>
        <li>Session with my own questions</li>
        <ul>
          <li>Creates an empty feedback session</li>
          <li>Allows you to craft custom questions that fit your needs</li>
        </ul>
        <li>Session using template: team peer feedback (point-based)</li>
        <ul>
          <li>Provides 5 standard questions for team peer evaluations</li>
          <li>Allows you to modify/remove the given questions and add your own questions as required</li>
        </ul>
        <li>Session using template: team peer feedback (percentage-based)</li>
        <ul>
          <li>Similar to above, but uses a percentage-based question (instead of a point-based question) to determine the contribution level of team members</li>
        </ul>
      </ul>
      <li>
        <b><a [tmRouterLink]="instructorHelpPath" [queryParams]="{questionId: SessionsSectionQuestions.SESSION_QUESTIONS, section: Sections.sessions}">Add questions</a> to your session to suit your needs.</b><br>
        For each question, you can set the following:
      </li>
      <ul>
        <li>
          Question type: the style of question being asked. Choose from our 10 different <a [tmRouterLink]="instructorHelpPath" [queryParams]="{questionId: QuestionsSectionQuestions.ESSAY, section: Sections.questions}">question types</a>.
        </li>
        <li>
          Question feedback path: the feedback giver and feedback recipient
        </li>
        <li>
          Response visibility options: who can see the answers, giver name and recipient of a response.
        </li>
      </ul>
      <li>
        <b>Preview your session</b><br>
        After you have finished setting up your session, <a [tmRouterLink]="instructorHelpPath" [queryParams]="{questionId: SessionsSectionQuestions.SESSION_PREVIEW, section: Sections.sessions}">preview the session</a> as a student or another instructor.
      </li>
    </ol>
  </div>
  <p align="right">
    <button type="button" class="btn btn-info" (click)="jumpTo('top')">Back to Top <i class="fas fa-chevron-up"></i></button>
  </p>
  <div class="separate-content-holder">
    <hr>
  </div>
  <h2 id="session-invites">3. Wait for your session to open</h2>
  <div>
    <p>
      After you have set up your session, you're all set!
    </p>
    <p>
      TEAMMATES automatically sends emails to students and instructors according to the preferences you specify when you create a session. The default settings are:
    </p>
    <ul>
      <li>
        When a session opens, TEAMMATES will automatically email students instructions to access the session. A copy of that email will be sent to you.
      </li>
      <li>
        24 hours before the closing time of a session, students will be sent a reminder to complete their responses.
      </li>
      <li>
        When the results of a session are published, students will be sent instructions to access the results.
      </li>
    </ul>
    <p>
      You can manually send reminders to students at any time while a session is open. Use the <button class="btn btn-light btn-sm dropdown-toggle">Remind</button> button of the session from the <span class="ui-text">Home</span> or <span class="ui-text">Sessions</span> page.<br>
      In addition, you are welcome to (but not required to) use your own email announcements (outside of TEAMMATES) to inform students to look out for these TEAMMATES emails.
    </p>
    <p>
      Click <a [tmRouterLink]="instructorHelpPath" [queryParams]="{questionId: SessionsSectionQuestions.STUDENT_DID_NOT_RECEIVE_SUBMISSION_LINK, section: Sections.sessions}">here</a> to find out remedies if some students say they did not receive the TEAMMATES emails as expected.
    </p>
    <p>
      Click <a [tmRouterLink]="instructorHelpPath" [queryParams]="{questionId: SessionsSectionQuestions.EXTEND_SESSION_DEADLINE, section: Sections.sessions}">here</a> to find how to extend the deadline for all students, or for specific students.
    </p>
    <p>
      While not normally needed, if you would like students to access TEAMMATES sooner (e.g., if you would like them to fill in their profile page in advance), you can get them to 'join' the course earlier by following these steps:
    </p>
    <ol>
      <li>
        In the <span class="ui-text">Courses</span> page, click the <button class="btn btn-light btn-sm dropdown-toggle">Other Actions</button> button of the course, and select <span class="ui-text">View</span> in the drop-down menu.
      </li>
      <li>
        Then, click the <button class="btn btn-sm btn-primary"><i class="fa fa-envelope"></i> Remind Students to Join</button> button, which will send them instructions to 'join' TEAMMATES immediately.
      </li>
    </ol>
    <p>
      Caution: 'joining' TEAMMATES requires students to use a Google account to authenticate themselves.
      Joining a TEAMMATES course is optional for students; they can still submit responses and view session results without joining, by using access links TEAMMATES sends them.
      However, some non-essential features such as creating a profile page are only available to students who have joined.
    </p>
  </div>
  <p align="right">
    <button type="button" class="btn btn-info" (click)="jumpTo('top')">Back to Top <i class="fas fa-chevron-up"></i></button>
  </p>
  <div class="separate-content-holder">
    <hr>
  </div>
  <h2 id="session-results">4. View and publish session results</h2>
  <div>
    <p>
      After a session has opened, you may:
    </p>
    <ul>
      <li>
        <a [tmRouterLink]="instructorHelpPath" [queryParams]="{questionId: SessionsSectionQuestions.SESSION_VIEW_RESULTS, section: Sections.sessions}">View responses</a>: see what respondents have answered, even if the session is still ongoing. Go to the <span class="ui-text">Sessions</span> page and click the corresponding <button class="btn btn-light btn-sm dropdown-toggle">Results</button> button.
      </li>
      <li>
        <a [tmRouterLink]="instructorHelpPath" [queryParams]="{questionId: SessionsSectionQuestions.MODERATE_RESPONSE, section: Sections.sessions}">Moderate responses</a>: edit inappropriate responses from respondents before publishing the responses.
      </li>
      <li>
        <a [tmRouterLink]="instructorHelpPath" [queryParams]="{questionId: SessionsSectionQuestions.SESSION_ADD_COMMENTS, section: Sections.sessions}">Add comments to responses</a>: reply to respondents' answers, or add your own notes on a response. You can make your comment visible to other instructors, the response giver, and/or the response giver's team.
      </li>
      <li>
        Remind students to submit responses: TEAMMATES automatically sends reminders to students; however, you can also manually send reminder emails to students at any time while a session is open. Use the <button class="btn btn-light btn-sm dropdown-toggle">Remind</button> button of the session from the <span class="ui-text">Home</span> or <span class="ui-text">Sessions</span> page.
      </li>
      <li>
        <a [tmRouterLink]="instructorHelpPath" [queryParams]="{questionId: SessionsSectionQuestions.SUBMIT_FOR_STUDENT, section: Sections.sessions}">Submit responses for students</a>: if a student has missed the closing time of the session, or is unable to submit the evaluation due to technical problems, you can submit the student's responses on his/her behalf.
      </li>
    </ul>
    <br>
    <p>
      After a session closes, you may:
    </p>
    <ul>
      <li>
        Publish results: make a session's results visible to students. Click the corresponding <button class="btn btn-light btn-sm dropdown-toggle">Results</button> button on the <span class="ui-text">Sessions</span> page, then select <span class="ui-text">Publish Results</span>. Students will not be able to view the session's results until you publish them.
      </li>
      <li>
        Download results of a session in spreadsheet format: first view the course-wide results of a session, then click <button class="btn btn-sm btn-primary"><i class="fas fa-file-download"></i> Download Results</button> to download the results of a session as a CSV file.
      </li>
    </ul>
  </div>
  <p align="right">
    <button type="button" class="btn btn-info" (click)="jumpTo('top')">Back to Top <i class="fas fa-chevron-up"></i></button>
  </p>
  <div class="separate-content-holder">
    <hr>
  </div>
  <h2 id="other-actions">5. Learn about other actions you can perform</h2>
  <div>
    <p>
      Beyond allowing you to collect and disseminate feedback, TEAMMATES can be a useful repository of student and course information. You may use TEAMMATES to:
    </p>
    <ul>
      <li>
        <a [tmRouterLink]="instructorHelpPath" [queryParams]="{questionId: StudentsSectionQuestions.STUDENT_VIEW_PROFILE, section: Sections.students}">View a student's profile</a> and <a [tmRouterLink]="instructorHelpPath" [queryParams]="{questionId: StudentsSectionQuestions.STUDENT_VIEW_RESPONSES, section: Sections.students}">all past records of a student</a>: view the profile that any enrolled student has written for him/herself, and see in one place all submissions given/received by a student. Handy for examining how a student progressed through a course.
      </li>
      <li>
        <a [tmRouterLink]="instructorHelpPath" [queryParams]="{questionId: StudentsSectionQuestions.STUDENT_EDIT_DETAILS, section: Sections.students}">Edit a student's data</a>: change a student's registered name, section or team name, or email address. You can also note down comments on students, for example to inform other instructors of information about a student that they should take note of.
      </li>
      <li>
        Search: <a [tmRouterLink]="instructorHelpPath" [queryParams]="{questionId: StudentsSectionQuestions.STUDENT_SEARCH, section: Sections.students}">search for students, teams or sections</a>.
      </li>
      <li>
        <a [tmRouterLink]="instructorHelpPath" [queryParams]="{questionId: CoursesSectionQuestions.COURSE_ARCHIVE, section: Sections.courses}">Archive old courses</a>: archive old courses that you no longer need actively.
      </li>
    </ul>
  </div>
  <p align="right">
    <button type="button" class="btn btn-info" (click)="jumpTo('top')">Back to Top <i class="fas fa-chevron-up"></i></button>
  </p>
  <div class="separate-content-holder">
    <hr>
  </div>
  <h2 id="contact-us">6. Contact us</h2>
  <div>
    <p>
      If you have doubts, comments, or questions about using TEAMMATES, just
      <a href="mailto:{{supportEmail}}">email us</a>.
      We usually respond within 24 hours.
    </p>
  </div>
  <p align="right">
    <button type="button" class="btn btn-info" (click)="jumpTo('top')">Back to Top <i class="fas fa-chevron-up"></i></button>
  </p>
</div>
